<!--展示某个订单详情-->
<template>
  <div>
    <!--订单详情主体结构-->
    <el-card class="box-card">
      <!--卡片头部-->
      <template #header>
        <div class="card-header">挂号详情</div>
      </template>
      <!--卡片身体部分-->
      <div class="top">
        <!--左侧标签-->
        <el-tag class="ml-2" type="success">
          <div class="leftTag">
            <svg t="1701616568247" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2583" width="16" height="16"><path d="M416.832 798.08c-16.192 0-32.32-6.208-44.672-18.56L119.424 525.76c-24.64-24.768-24.64-64.96 0-89.728 24.704-24.768 64.704-24.768 89.344 0l208.064 208.896L814.4 245.76c24.64-24.832 64.64-24.832 89.344 0 24.64 24.768 24.64 64.896 0 89.664L461.504 779.52c-12.352 12.352-28.544 18.56-44.672 18.56z" fill="#1AB394" p-id="2584"></path></svg>
            <span>{{orderInfo.param?.orderStatusString}}</span>
          </div>
        </el-tag>
        <!--右侧二维码-->
        <div class="rightInfo">
          <img src="@/assets/images/code_app.png">
          <div class="infos">
            <div class="info1">
            <span>
              <svg t="1701618852791" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3653" width="16" height="16"><path d="M849.565538 856.615385c-7.995077 3.938462-78.257231-41.590154-78.25723-41.590154a287.389538 287.389538 0 0 1-102.557539 18.628923c-138.279385 0-250.407385-95.271385-250.407384-212.755692s112.128-212.716308 250.407384-212.716308c138.279385 0 250.368 95.232 250.368 212.716308 0 65.614769-34.934154 124.297846-89.915077 163.328 0 0 28.396308 68.411077 20.361846 72.349538zM290.658462 660.125538s-92.278154 60.928-101.100308 57.540924c-8.782769-3.387077 22.449231-97.122462 22.449231-97.122462-65.378462-46.08-107.126154-116.381538-107.126154-195.111385 0-138.830769 129.851077-251.392 290.067692-251.392 145.880615 0 266.633846 93.341538 287.035077 214.882462a283.254154 283.254154 0 0 0-25.442462-1.181539c-141.666462 0-256.512 104.841846-256.512 234.141539 0 18.865231 2.441846 37.179077 7.089231 54.744615a334.257231 334.257231 0 0 1-116.460307-16.541538zM157.774769 0A157.617231 157.617231 0 0 0 0 157.774769v708.450462A157.617231 157.617231 0 0 0 157.774769 1024h708.450462A157.617231 157.617231 0 0 0 1024 866.225231V157.774769A157.617231 157.617231 0 0 0 866.225231 0H157.774769z m599.512616 573.046154a33.595077 33.595077 0 1 0 0-67.150769 33.595077 33.595077 0 0 0 0 67.190153z m-181.169231 0a33.595077 33.595077 0 1 0 0-67.150769 33.595077 33.595077 0 0 0 0 67.190153z m-67.190154-191.330462a37.651692 37.651692 0 1 0 0-75.303384 37.651692 37.651692 0 0 0 0 75.303384z m-225.949538 0a37.651692 37.651692 0 1 0 0-75.303384 37.651692 37.651692 0 0 0 0 75.303384z" fill="#09BB07" p-id="3654"></path></svg>
            </span>
              <span>关注"trainees.cn预约挂号"</span>
            </div>
            <span class="info2">"快速预约挂号"</span>
          </div>
        </div>
      </div>
      <!--底部订单详情-->
      <div class="bottoms">
        <!--左侧展示订单详情信息-->
        <div class="bottomLeft">
          <el-descriptions
              class="margin-top"
              :column="1"
              border
          >
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">就诊人信息</div>
              </template>
              {{orderInfo.patientName}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">聚诊日期</div>
              </template>
              {{ orderInfo.reserveDate }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">就诊医院</div>
              </template>
              {{orderInfo.hosname}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">就诊科室</div>
              </template>
              {{orderInfo.depname}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">医生职称</div>
              </template>
              {{orderInfo.title}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">医事服务费</div>
              </template>
              <span style="color: red">{{orderInfo.amount}}元</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">挂号单号</div>
              </template>
              {{orderInfo.outTradeNo}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">挂号时间</div>
              </template>
              {{orderInfo.createTime}}
            </el-descriptions-item>
          </el-descriptions>
          <div class="btn" v-if="orderInfo.orderStatus==0||orderInfo.orderStatus==1">
            <el-popconfirm title="确定取消预约吗?" v-on:confirm="confirmCancel">
              <template #reference>
                <el-button>取消预约</el-button>
              </template>
            </el-popconfirm>
            <el-button type="primary" size="default" v-if="orderInfo.orderStatus==0" v-on:click="openDialog">支付</el-button>
          </div>
        </div>
        <!--左侧展示订单详情信息-->
        <div class="bottomRight">
          <el-card class="box-card">
            <template #header>
              <div class="card-header">
                <span>注意事项</span>
              </div>
            </template>
            <p>1.请确认就诊人信息是否准确，若填写错误将无法取号就诊，损失由本人承担;</p>
            <p>2.[取号] 就诊当天需在{{orderInfo.fetchTime}}现场取号，未取号视为爽约，该号不退不换;</p>
            <p style="color: red">3.[退号]在{{orderInfo.quitTime}}前可在线退号，逾期将不可办理退号退费;</p>
            <p>4.北京114预约挂号支持自费患者使用身份证预约，同时支持北京市医保串者使用北京社保卡在平台预约挂号。请于就诊当日，携带预约挂号所使用的有效身份证件到院取号;</p>
            <p>5.请注意北京市医保患者在住院期间不能使用社保卡在门诊取号</p>
          </el-card>
        </div>
      </div>
    </el-card>
    <!--展示支付二维码,v-model来控制显示与隐藏-->
    <el-dialog v-on:close="dialogClose" v-model="dialogVisible" title="微信支付" width="400px">
      <div class="qrcode">
        <img :src="imgUrl" alt="">
        <p>请使用微信扫一扫</p>
        <p>扫描二维码支付</p>
      </div>
      <template v-slot:footer>
        <el-button type="primary" size="default" v-on:click="closeDialog">关闭窗口</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">

import {onMounted, ref} from "vue";
import {useRoute} from "vue-router";
import {OrderResponseData, PayResult, QrCode} from "@/api/user/type.ts";
import {regCancelOrder, regOrderInfo, reqQrcode, reqQueryPayState} from "@/api/user";
import {ElMessage} from "element-plus";
//生成二维码的插件QrCode
import QRCodePlug from 'qrcode';

let $route = useRoute();

let orderInfo = ref<any>({});

//控制对话框显示与隐藏
let dialogVisible = ref<boolean>(false);

//二维码图片路径
let imgUrl = ref<string>("");

//定时器
let timer = ref<any>();

//获取订单详情的数据
const getOrderInfo = async () => {
  let result: OrderResponseData = await regOrderInfo($route.query.orderId as string);
  if (result.code == 200) {
    orderInfo.value = result.data;
  }
};

//取消订单-订单状态有三种 orderStatus -1 取消预约 ,0 预约但是没有支付 ,1 支付成功
const confirmCancel = async () => {
  try {
    //取消预约成功
    let result:any = await regCancelOrder($route.query.orderId as string);
    if (result.code == 200) {
      ElMessage({
        type: "success",
        message: result.message,
      });
      //重新获取订单详情数据
      await getOrderInfo();
    } else {
      ElMessage({
        type:"error",
        message:`try预约取消失败,错误码:${result.code},请稍后再试!`
      });
    }
  } catch (error) {
    ElMessage({
      type:"error",
      message:"catch预约取消失败,请稍后再试!"
    });
  }
}

//点击支付按钮
const openDialog = async () => {
  //打开打开对话框
  dialogVisible.value = true;
  //发请求获取支付需要的二维码信息
  let result: QrCode = await reqQrcode($route.query.orderId as string);
  //根据服务器返回的二维码对象信息用插件对其生成为二维码图片
  imgUrl.value = await QRCodePlug.toDataURL(result.data.codeUrl);
  //询问服务器当前这笔交易的支付结果
  //只要二维码发来,需要每个几秒询问服务器是否已支付成功
  timer.value = setInterval(async () => {
    let result: PayResult = await reqQueryPayState($route.query.orderId as string);
    //如果返回的数据data:true,代表支付成功
    if (result.data){
      //关闭对话框
      dialogVisible.value = false;
      //提示支付成功
      ElMessage({
        type:"success",
        message: "支付成功",
      });
      //清除轮训定时器
      clearInterval(timer.value);
      //再次获取刷新订单详情的数据
      getOrderInfo();
    }
    console.log(result);
  },2000);
}
//关闭微信支付二维码窗口
const closeDialog = () => {
  dialogVisible.value = false;
  //清除轮训支付状态定时器
  clearInterval(timer.value);
}
//关闭支付二维码对话框X图标关闭窗口的回调
const dialogClose = () => {
  //清除轮训支付状态定时器
  clearInterval(timer.value);
}
//组件挂载完毕
onMounted(() => {
  getOrderInfo();
});
</script>

<style scoped lang="scss">
.box-card {
  .card-header {
    color: #7f7f7f;
    font-weight: 900;
  }
  .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #cccccc;
    padding-bottom: 18px;
    .leftTag {
      display: flex;
      justify-content: center;
      align-items: center;
      span{
        margin-left: 5px;
      }
    }
    .rightInfo {
      display: flex;
      justify-content: space-between;
      align-items: center;
      img{
        width: 40px;
        height: 40px;
      }
      .infos {
        .info1 {
          display: flex;
          justify-content: center;
          align-items: center;
          margin-left: 10px;
          font-size: 12px;
          line-height: 10px;
        }
        .info2 {
          margin-left: 10px;
          font-size: 12px;
          line-height: 10px;
        }
      }
    }
  }
  .bottoms {
    display: flex;
    //justify-content: space-between;
    margin-top: 18px;
    .bottomLeft {
      flex: 3;
      .btn {
        margin: 10px 0px;
      }
    }
    .bottomRight {
      flex: 7;
      margin-left: 20px;
      p{
        line-height: 28px;
      }
    }
  }
}
:deep(.el-dialog__body) {
  border-top: 1px solid #7f7f7f;
  border-bottom: 1px solid #7f7f7f;
}
.qrcode {
  display: flex;
  flex-direction: column;
  align-items: center;
  p{
    line-height: 20px;
  }
}
</style>